<template>
    <div>
        <a-collapse v-model:activeKey="activeKey" :bordered="false" v-if="collapse" @change="handleChange">
            <template #expandIcon="{ isActive }">
                <flexbox>
                    <!-- <my-icon type="iconbiaotixiala" style="color: #2359dd" :rotate="isActive ? 0 : -90" /> -->
                    <img src="@/assets/images/chart/collaspe.png" style="width: 16px; height: 18px" />
                    <span style="margin-top: 2px">{{ isActive ? '收起' : '展开' }}</span>
                </flexbox>
            </template>
            <a-collapse-panel key="1" :style="customStyle">
                <template #header>
                    <flexbox justify="center" class="font-w-b" style="flex: 1; font-size: 14px">
                        <slot name="title" class="title" />
                        <img src="@/assets/images/chart/headerBg.png" class="img1" />
                    </flexbox>
                </template>
                <slot />
                <template #extra>
                    <slot name="titleExtra" />
                </template>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    props: {
        title: {
            type: String,
            default: ''
        },
        collapse: {
            type: Boolean,
            default: true
        },
        defaultOpen: {
            type: Boolean,
            default: true
        }
    },
    setup(props, { emit }) {
        const activeKey = ref(['1']);
        const customStyle = 'background: #fff;overflow: hidden;border:0;font-size: 16px; color: #1f2329;';
        activeKey.value = props.defaultOpen ? ['1'] : ['0'];
        const handleChange = (val) => {
            emit('change', val);
        };
        return { activeKey, customStyle, handleChange };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-collapse-header) {
    height: 52px;
    background-color: #f8fbff;
    .title {
        font-size: 16px;
        color: #172b4d;
        font-weight: bold;
        img {
            width: 16px;
        }
    }
}
::v-deep(.ant-collapse-content > .ant-collapse-content-box) {
    padding: 0 !important;
}
.img1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
}
</style>